<template>
  <div class="row mcrd-wrap">
      <div class="row mcrd-titles">
          <span v-for="(v,i) of showTitle" :key="'showTitle'+i" :class="v.sortKey | isSelected(sort)" @click="chooseType(v.sortKey)">{{v.title}}</span>
      </div>
      <div class="row mcrd-content">
          <div v-for="(v,i) of showImages" :key="'showImages'+i" class="mcrd-contentWrap" :hidden="!v.img">
            <SingleGuess :guessInfo="v" :mcrd="true">
                <!-- 组件分发 -->
                <p class="mcrd-p">{{v.title}}</p>
                <div class="mcrd-sg-infoWrap">
                    <b>￥{{v.price}}</b>
                    <span class="iconfont">{{v.cfav}}&#xe668;</span>
                </div>
            </SingleGuess>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    watch:{
        sort(newdata){
            this.$store.dispatch("loadClassifyRightDownData");
        }
    },
    filters:{
        isSelected(value,sort){
            return value==sort?"selected":"";
        }
    },
    computed:{
        showImages(){
            return this.$store.getters.classifyRDownImages;
        },
        showTitle(){
            return this.$store.getters.classifyRDownTitle;
        },
        sort(){
            return this.$store.getters.sort;
        },

    },
    methods:{
        chooseType(v){
            this.$store.commit("setSort",v);
        }
    }
  
}
</script>

<style lang="less">
.mcrd-wrap{
    >.mcrd-titles{
        height:0.7rem;
        display:flex;
        align-items: center;
        text-align: center;
        font-size: 0.25rem;
        border-bottom:1px solid #aaa;
        >span{
            border-left:1px solid #aaa;
            flex-grow: 1;
            &:first-child{
                border-left: none;
            }
        }
        >.selected{
            color:#FC5779;
        }
    }
    >.mcrd-content{
        margin-top:0.2rem;
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
        >.mcrd-contentWrap{
            width:47%;
        }

        // .sg-parentStyle{
        //     >.sg-imgWrap{

        //         height:3.02rem
        //     }
        //     >p{
        //         overflow : hidden;
        //         text-overflow: ellipsis;
        //         white-space: nowrap;
        //     }
        //     >.sg-infoWrap{
        //         display:flex;
        //         justify-content: space-between;
        //         align-items: center;
        //         >b{
        //             font-size:0.25rem;
        //             color:#FC5779;
        //         }
        //         >.iconfont{
        //             font-size: 0.13rem;
        //             color:#aaa;
        //         }
        //     }
        // }
    }
}

</style>